<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Antv-F2</title>
    <link rel="stylesheet" href="./modelCss/reset.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            background: #eeeeee;
        }

        .box {
            background: #fff;
            padding-bottom: 20px;
        }

        .tu {
            height: 240px;
            position: relative;
        }

        .bgtu {
            height: 240px;
            overflow: hidden;
        }

        .bgtu img {
            width: 100%;
        }

        .touxiang {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 auto;
            margin-top: -40px;
            overflow: hidden;
        }

        .touxiang img {
            width: 100%;
        }

        #myChart {
            width: 100%;
        }

        .steps {
            width: 96%;
            margin: 0 auto;
            margin-top: 60px;
            border-radius: 5px;
            background-image: linear-gradient(-135deg, #159d9d 0%, #15a991 43%, #18b387 63%, #17b886 100%);
        }

        .head {
            width: 95%;
            margin: 0 auto;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #35c5ae;
        }

        .yue {
            width: 38px;
            height: 20px;
            border-radius: 32px;
            background: #079f70;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .yue span {
            color: white;
            font-size: 12px;
            margin-left: 4px;
        }

        .yue i {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #75fff2;
        }

        .bu {
            color: white;
            text-align: right;
            margin-right: 5px;
        }

        #pp {
            height: 30px;
            line-height: 30px;
            color: #9d9d9d;
            font-size: 14px;
            text-indent: 1em;
        }

        .add {
            height: 50px;
            background: #fff;
            display: flex;
            align-items: center;
        }

        .icon {
            width: 30px;
            height: 30px;
            display: block;
            margin-right: 10px;
            margin-left: 20px;
        }

        .icon img {
            width: 100%;
            height: 100%;
        }

        .add2 {
            margin-top: 20px;
        }

        .add2 p {
            margin-left: 60px;
        }

        .banner {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .banner i {
            width: 20px;
            height: 30px;
            display: inline-block;
        }

        .bb{
            display: flex;
            align-items: center;
        }
        .bb i{
            background: url('./images/右箭头.png') center center no-repeat;
            background-size: 100%;
            margin: 0px 10px;
        }

        .banner .i2 {
            background: url('./images/三\ 点.png') center center no-repeat;
            background-size: 100%;
            margin-right: 25px;
        }

        .dianxin {
            height: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .dianxin i {
            width: 24px;
            height: 16px;
            display: block;
        }

        .xinhao {
            background: url('./images/4g信号无_画板\ 1.png') center center no-repeat;
            background-size: 100%;
            margin-left: 5%;
        }

        .dianl {
            background: url('./images/电量.png') center center no-repeat;
            background-size: 100%;
            margin-right: 10%;
        }

        .aa {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .aa span {
            font-size: 10px;
            color: #b4b4b4;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="dianxin">
            <i class="xinhao"></i>
            <div class="aa">
                <i class="dianl"></i>
                <span>6:30</span>
            </div>
        </div>
        <div class="banner">
            <div class="bb">
                <i></i>
                <span>我的主页</span>
            </div>
            <i class="i2"></i>
        </div>
        <div class="tu">
            <div class="bgtu">
                <img src="./images/big-7.jpg" alt="">
            </div>
            <div class="touxiang">
                <img src="./images/4.jpg" alt="">
            </div>
        </div>

        <div class="steps">
            <div class="head">
                <div class="yue">
                    <span>月</span>
                    <i></i>
                </div>
                <p class="bu">步数：13580</p>
            </div>
            <canvas id="myChart"></canvas>
        </div>
    </div>
    <p id="pp">关注的人</p>
    <div class="add">
        <i class="icon"><img src="./images/添加.png" alt=""></i>
        <span>添加</span>
    </div>
    <div class="add add2">
        <p>捐赠步数</p>
    </div>
</body>

</html>
<!-- 引入在线资源 -->
<script src="https://gw.alipayobjects.com/os/lib/antv/f2/3.7.0/dist/f2.min.js"></script>
<script src="./js/jquery-3.4.1.min.js"></script>
<!-- 友情提醒：请按需更新版本号。 -->
<script>

    // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
    const data = [{
        date: '2018-04-21',
        steps: 19670
    }, {
        date: '2018-04-22',
        steps: 12000
    }, {
        date: '2018-04-23',
        steps: 12345
    }, {
        date: '2018-04-24',
        steps: 26044
    }, {
        date: '2018-04-25',
        steps: 29763
    }, {
        date: '2018-04-26',
        steps: 10586
    }, {
        date: '2018-04-27',
        steps: 14758
    }, {
        date: '2018-04-29',
        steps: 12456
    }, {
        date: '2018-04-30',
        steps: 15345
    }, {
        date: '2018-05-01',
        steps: 15674
    }, {
        date: '2018-05-02',
        steps: 13543
    }, {
        date: '2018-05-03',
        steps: 12654
    }, {
        date: '2018-05-04',
        steps: 11549
    }, {
        date: '2018-05-06',
        steps: 1461
    }, {
        date: '2018-05-07',
        steps: 22487
    }, {
        date: '2018-05-08',
        steps: 11062
    }, {
        date: '2018-05-09',
        steps: 23543
    }, {
        date: '2018-05-10',
        steps: 12776
    }, {
        date: '2018-05-11',
        steps: 12919
    }, {
        date: '2018-05-12',
        steps: 2161
    }, {
        date: '2018-05-13',
        steps: 14867
    }, {
        date: '2018-05-14',
        steps: 18725
    }, {
        date: '2018-05-15',
        steps: 18983
    }, {
        date: '2018-05-16',
        steps: 22348
    }, {
        date: '2018-05-17',
        steps: 17142
    }, {
        date: '2018-05-18',
        steps: 18715
    }, {
        date: '2018-05-19',
        steps: 13861
    }, {
        date: '2018-05-20',
        steps: 12348
    }, {
        date: '2018-05-21',
        steps: 24365
    }, {
        date: '2018-05-22',
        steps: 14271
    }, {
        date: '2018-05-23',
        steps: 14271
    }];

    // Step 1: 创建 Chart 对象
    const chart = new F2.Chart({
        id: 'myChart',
        pixelRatio: window.devicePixelRatio, // 指定分辨率
        padding: [20, 24, 'auto', 'auto']
    });

    // Step 2: 载入数据源
    chart.source(data, {
        date: {
            type: 'timeCat',
            range: [0, 1],
            mask: 'MM-D'
        },
        steps: {
            ticks: [10000],
            formatter: function formatter(val) {
                return val === 10000 ? '1W' : 0;
            }
        }
    });

    // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
    chart.axis('date', {
        line: {
            stroke: '#35c4b2' //x轴线颜色
        },
        label: function label(text, index, total) {
            const cfg = {
                textAlign: 'center',
                fill: '#73e6e1',  //x轴字体颜色
                fontSize: 12,
                fontWeight: 300
            };
            if (index === 0) {
                cfg.textAlign = 'start';
                cfg.text = text.split('-').join('月');
            } else {
                cfg.text = text.split('-')[1];
            }

            if (index === total - 1) {
                cfg.textAlign = 'end';
                cfg.fill = '#73e6e1';
                cfg.fontWeight = 'normal';
            }

            return cfg;
        }
    });
    chart.axis('steps', {
        position: 'right',
        label: {
            fill: '#5bd3de', // 1w 字体颜色
            fillOpacity: 0.5,
            fontSize: 9,
            fontWeight: 300
        },
        grid: {
            stroke: '#5bd3de'  //1w 虚线的颜色
        }
    });
    chart.tooltip({
        custom: true,
        showCrosshairs: true,
        showTooltipMarker: false,
        crosshairsStyle: {
            lineDash: [2],
            stroke: '#37b3bd'
        },
        onChange: function onChange(e) {
            const item = e.items[0];
            const origin = item.origin;
            const tooltipEl = $('#tooltip');
            tooltipEl.text(origin.steps);
            // 设置 tooltip 位置
            const canvasOffsetTop = $('#container').position().top;
            const canvasOffsetLeft = $('#container').position().left;
            const tooltipWidth = tooltipEl.outerWidth();
            tooltipEl.css({
                visibility: 'visible',
                left: canvasOffsetLeft + item.x - tooltipWidth / 2,
                top: canvasOffsetTop
            });
        },
        onHide: function onHide() {
            const tooltipEl = $('#tooltip');
            tooltipEl.css({
                visibility: 'hidden'
            });
        }
    });
    chart.area().position('date*steps').style({
        fill: 'l(-90) 0:rgba(255,255,255,0.10) 1:rgba(255,255,255,0.40)', //折线数据区域的白色背景
        fillOpacity: 1
    });
    chart.line()
        .position('date*steps')
        .color('#fff')
        .size(1.5);
    chart.point()
        .position('date*steps')
        .color('#fff')
        .size(2.5);

    // Step 4: 渲染图表
    chart.render();
</script>